<template>
  <x-dialog class="modal-dialog" :show="show">
    <slot class="default">
      <h3 class="hint-title">签约出租成功</h3>
      <p class="hint-txt">恭喜您成功与房东签订租房合同，请尽快在45分钟内完成订单支付，否则该合同将失效!</p>
      <ul class="hint-content">
        <li>房源<span class="fr">{{'测试数据'}}</span></li>
        <li>房东<span class="fr">{{'张生'}}</span></li>
        <li>租期<span class="fr">{{'2017.10.10'}}-{{'2018.10.10'}}</span></li>
        <li>租金<span class="fr">{{'1000.00'}}元/月</span></li>
        <li>支付金额<span class="fr">{{'2000.00'}}元</span></li>
      </ul>
      <x-button class="btn" type="primary" @click.native="hintDialog = false">我的合同</x-button>
      <i class="close-x" @click="show = false"></i>
    </slot>
  </x-dialog>
</template>
<style lang="less">
  .modal-dialog {
    .weui-dialog {
      width: 14.8rem;
      box-sizing: border-box;
      overflow: visible;
      padding: 0 .75rem;
      .hint-title {
        font-size: 21px;
        margin-top: 1.45rem;
      }
      .hint-txt {
        font-size: 15px;
        margin: .2rem 0 .55rem 0;
      }
      li {
        width: 100%;
        font-size: 13px;
        text-align: left;
        color: #777777;
        height: 24px;
        // line-height: 24px;
        .fr {
          float: right;
        }
      }
      .btn {
        background-color:#ff9600;
        margin: 0;
        padding: 0;
        margin-top: .75rem;
        margin-bottom: .75rem;
        width: 13.3rem;
        border-radius: 3px;
      }
    }
  }
</style>
<script>
  export default {
    data () {
      return {
        show: true
      }
    }
  }
</script>
